<template>
	<Layout :class="'bg-white p-2'">
		<Row :class="'m-1'">
			<Button type="error" @click="newHouse()" style="margin-left: 20px;">新增</Button>
			<Input :class="'w-25 m-2'" v-model="searchKey" placeholder="请输入检索关键字" />
			<Button type="primary" shape="circle" @click="search(1)" icon="ios-search">查询</Button>			
		</Row>
		<Layout :class="'bg-white'">
			<div v-for="houseRentClientVo in tableInfo.data"
				style="margin-bottom: 5px; border: 0.05cm groove #D3D3D3;border-radius:20px;height: 200px;">
				<h5 style="margin: 15px;">标题：{{houseRentClientVo.title}}</h5>
				<div style="margin: 15px;">详情：
					<p style="display: inline-block;">{{houseRentClientVo.detail}}</p>
					<row>{{houseRentClientVo.personName}}发布于{{houseRentClientVo.ct}}
					</row>
				</div>
				<div style="margin-top: 40px;">
					<Button type="primary" size="small" style="margin-left: 30px;"
						@click="show(houseRentClientVo.houseRentId)">详细</Button>
					<Button type="error" size="small" style="margin-left: 10px;"
						@click="remove(houseRentClientVo.houseRentId)">删除</Button>
				</div>
			</div>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {
				searchKey: "",
				clientId: 1001,
				tableInfo: {
					currentPage: 1,
					total: 0,
					data: []
				}
			}
		},
		methods: {
			init: function() {
				this.search(1);
			},
			newHouse: function() {
				this.$router.push({
					name: "houseRent_new"
				});
			},
			show: function(houseRentId) {
				this.$router.push({
					name: "houseRent_detail",
					params: {
						houseRentId
					}
				});
			},
			remove: function(houseRentId) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除用户，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/house-rent-client-vo/info",
							param: {
								houseRentId
							}
						}).then(data => {
							this.search(this.$data.tableInfo.currentPage);
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			search: function(currentPage) {
				this.http.get({
					url: "/house-rent-client-vo/page",
					param: {
						currentPage: currentPage,
						searchKey: this.$data.searchKey,
						clientId: this.$data.clientId
					}
				}).then(data => {

					this.$data.tableInfo.data = data.records;
					this.$data.tableInfo.total = data.total;
					this.$data.tableInfo.pageSize = data.size;
				});
			},
			pageSearch: function(changedPage) {
				this.$data.tableInfo.currentPage = changedPage;
				this.search(changedPage);
			}
		},
		created: function() {
			this.init();
		}
	}
</script>

<style>

</style>
